<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<script>
    function handleRadioChange(ctrl)
    {
        document.getElementById('sideADiv').style.visibility='visible';
        document.getElementById('angleADiv').style.visibility='visible';

	if(ctrl.value == '3Sides')
        {
            window.alert("Selected 3Sides");
            document.getElementById('sideADiv').style.visibility='hidden';
        }
        else if(ctrl.value == '2Sides1Angle')
	{
            window.alert("Selected 2sides one angle");
            document.getElementById('angleADiv').style.visibility='hidden';
        }
        else if(ctrl.value == '1Side2Angles')
        {
            window.alert("Selected 1side  2 angles");
        }
    }

</script>
<jsp:useBean id="triangleCalculatorForm" scope="session"
             class="com.myapp.struts.forms.TriangleCalculatorForm" />

<html:html>
    <head>
        <title>Number Multiplication</title>
    </head>
    <body bgcolor="white"><p>

        <!-- if the result is not empty then display the result --> 
        <logic:notEmpty name="triangleCalculatorForm" property="result">
        <hr/>
        Result = <bean:write name="triangleCalculatorForm" property="result"/>
        <hr/>
        </logic:notEmpty>


        <h2>Enter the Two Numbers</h2>
        <p>
            <html:errors />
        </p>
        <p>
            <html:form action="/TriangleCalculator.do">

                <html:radio property="triangleOption" value="3Sides"
                            onchange="handleRadioChange(this)" >3 Sides </html:radio>
                &nbsp;&nbsp;&nbsp;
                <html:radio property="triangleOption" value="2Sides1Angle"
                            onchange="handleRadioChange(this)" >2 Sides and 1 Included Angle </html:radio>
                &nbsp;&nbsp;&nbsp;
                <html:radio property="triangleOption" value="1Side2Angles"
                            onchange="handleRadioChange(this)" >2 Angles and 1 Included Side </html:radio>

                <br/> <br/>

            <div id="sideADiv">
                Enter sideA <html:text property="sideA" size="5" maxlength="5"/>
                &nbsp;&nbsp;&nbsp;
            </div>
            <div id="angleADiv">
                Enter angleA <html:text property="angleA" size="3" maxlength="3"/>
            </div>
            <br/>
                Enter sideB <html:text property="sideB" size="5" maxlength="5"/>
                &nbsp;&nbsp;&nbsp;
                Enter angleB <html:text property="angleB" size="3" maxlength="3"/>
                <br/>
                Enter sideC <html:text property="sideC" size="5" maxlength="5"/>
                &nbsp;&nbsp;&nbsp;
                Enter angleC <html:text property="angleC" size="3" maxlength="3"/>
                <br/>
                <br/>
                <br/>
                <%--
                Enter 3 sides : <html:text property="sideA" size="16" maxlength="16"/><br/>
                Enter 2 sides and an Angle: <html:text property="sideA" size="16" maxlength="16"/><br>
                Enter 1 side and 2 angles: <html:text property="sideA" size="16" maxlength="16"/><br>
                Enter First Number: <html:text property="numberOne" size="16" maxlength="16"/><br>            
                Enter Second Number: <html:text property="numberTwo" size="16" maxlength="16"/><br>
                --%>

                <html:submit property="userAction" value="Submit"/>
                <html:reset/>
            </html:form>
        </p>

    </body>
</html:html>

